import 'package:flutter/material.dart';

class Widget_Flexible_Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flexible"),
        ),
        body: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Flexible1"),
                  color: Colors.blue,
                ),
                Flexible(
                  flex: 10,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Flexible"),
                    color: Colors.blue,
                  ),
                ),
                Flexible(
                  flex: 10,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Flexible"),
                    color: Colors.blue,
                  ),
                ),
                Flexible(
                  flex: 10,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Flexible"),
                    color: Colors.blue,
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Flexible1"),
                  color: Colors.blue,
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Flexible1"),
                  color: Colors.blue,
                ),
                Flexible(
                  flex: 1,
                  child: Container(
                    child: Text("Flexible2"),
                    color: Colors.blue,
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Flexible3"),
                  color: Colors.blue,
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Expanded1"),
                  color: Colors.blue,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    child: Text("Expanded2"),
                    color: Colors.blue,
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(5.0),
                  child: Text("Expanded3"),
                  color: Colors.blue,
                )
              ],
            ),
            Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Expanded"),
                    color: Colors.blue,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Expanded"),
                    color: Colors.blue,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.all(5.0),
                    child: Text("Expanded"),
                    color: Colors.blue,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

/**
 * Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力，但是不强制子组件填充可用空间。
 * Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间，是强制子组件填充可用空间。
    const Flexible({
    Key key,
    this.flex = 1,//组件占据剩余空间的比例
    this.fit = FlexFit.loose,
    @required Widget child,
    })
 */
